Testing LibraryのQuery - mrsekut-p

Testing LibraryのQuery

from React Testing Library

大きな括りとしては3種類 ref

getBy..

一致するものがなかったらthrow

queryBy..

一致するものがなかったらnullを返す

findBy..

一致するものが見つかったら解決されるPromiseを返す

見つからなかった場合はrejectされる

getBy..とwaitForを併用したのと同じ

↑これらは、一致するものが2件以上あった場合も失敗と見なされる

それぞれに、xxxAllBy..も用意されている

e.g. getAllBy..

https://testing-library.com/docs/queries/about/

Queryには利用の推奨の優先順位がある ref

どれを使うか迷う場合は、優先順位の高いものを使用するようにすれば良い

優先順位

<label>の中身の値のこと

htmlForではなく

getByPlaceholderText

placeholderで探す

form以外でのテキスト

getByDisplayValue

formの中で入力中の値などで使う

意味不

第2引数

https://testing-library.com/docs/queries/about#textmatch-examples

exact

boolean

defaultはtrue

大文字小文字の区別、完全一致

normalizer

https://testing-library.com/docs/queries/about#screendebug

今のviewの状態を見れる

https://qiita.com/Kontam/items/0dc8eaff928b6c0b8895#queryの優先順位

DOM要素上の値を取得するやつをqueryと呼ぶらしい

role以外の取得方法をあまり知らないけど、idとかclassでやるぐらいならaccessiblity的に意味あるものでやったほうが良いねmrsekut.icon

https://qiita.com/Kontam/items/0dc8eaff928b6c0b8895

ttdでWeb Accessibility改善をする

良さげmrsekut.icon

https://testing-playground.com/

練習できる

https://chrome.google.com/webstore/detail/testing-playground/hejbmebodbijjdhflfknehhcgaklhano/related

chrome extention

https://testing-library.com/docs/queries/about#browser-extension

docsよみ

Queries

About Queries

ByRole

ByLabelText

ByPlaceholderText

ByText

ByDisplayValue

ByAltText

ByTitle

ByTestId